<template>
	<div class="home-wrap">
		<div class="topTitle flex">
			<a href="/" class="logo">
				<h1>1234TV投教平台</h1>
			</a>
			<div class="fract flex">
				<span class="ell">{{user.nickname}}</span>
				<router-link to="/login" v-if="!user.logined">登录</router-link>
				<a href="javascript:;" @click="loginOut" v-else>退出</a>
			</div>
		</div>
		<div class="halllist">
			<div class="h_title">
				<h2><i class="icon live_class"></i>直播课堂</h2>
			</div>
			<div class="room-list-ul">
				<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="40">
					<ul class="fix">
						<li v-for="(item,index) in roomList" :key="index">
							<router-link :to="{name:'room',params:{eng_name:item.eng_name,roomid: item.room_id }}" class="img">
								<i class="password_bg" v-if="item.password"></i>
								<img class="lazy" :data-src="item.room_img | roomDefault" :src="lazyload">
								<p class="txt fix">
									<template v-if="item.room_qualification">
										<b class="v m" title="实名认证" v-if="item.room_qualification === 1">实名</b>
										<b class="v" title="机构认证" v-else>认证</b>
									</template>
									<span class="name room_name ell">{{item.room_name}}</span>
								</p>
								<p class="txt fix">
									<span class="fl live live_color" v-if="item.is_live"><b class="red_dot_bg"></b>在线中</span>
									<span class="fl c222" v-else><b class="gray_dot_bg"></b>休息中</span>
									<span class="fr ell people-number" v-if="item.sum_users"><i></i>{{item.sum_users}}人</span>
								</p>
							</router-link>
						</li>
					</ul>
					<div class="loading" v-show="tips">全部加载完咯</div>
					<div class="loading" v-show="loading"><img src="@/assets/images/loading.gif" alt="" class="loading-img"/><span>玩命加载中...</span></div>
				</div>
			</div>
		</div>
		<bind-tips></bind-tips>
		<back-to-top></back-to-top>
	</div>
</template>

<script>
	import {getHallInfo,getRoomList} from '@/api/hall'
	import bindTips from '@/views/bind_phone'
	import {customLazyLoad} from '@/utils'
	import {mapGetters} from 'vuex'
	import mixin from '@/mixins/removeLoading'
	import roomDefaultSrc from '@/assets/images/default/room-icon-default.jpg'
	import lazyload from '@/assets/images/default/lazyload.jpg'
	import BackToTop from '@/components/BackToTop'
	export default{
		name:'moreRoomList',
		components:{
			bindTips,
			BackToTop
		},
		mixins: [mixin],
		filters:{
			roomDefault(img){
				if(!img){
					return roomDefaultSrc
				}else{
					return img
				}
			}
		},
		metaInfo: {
		  title: '直播间列表-1234tv.com',
			meta: [{
		    name: 'keywords',
		    content: '1234tv.com、1234tv财经直播、财经直播平台、财经视频、财经直播系统、财经直播间、财经直播视频、财经直播教程'
		  },{
				name: 'description',
				content: '资深讲师实时在线分析大盘走势、解读行情、分享投资技巧'
			},{
				itemprop:'name',
				content:'直播间列表-1234tv.com'
			}],
		},
		computed:{
			...mapGetters([
			  'user',
				'token'
			])
		},
		data(){
			return{
				listQuery:{
					page:1,
					pageSize:100,
					official_more:1
				},
				roomList:[],
				tips:false,
				loading:false,
				busy:true,
				lazyload
			}
		},
		created(){
			this.getRoomList()
		},
		methods:{
			loginOut(){
				this.$store.dispatch('LogOut').then(res=>{
					if(localStorage.getItem("noalertbind_"+this.user.uid)){
						localStorage.removeItem("noalertbind_"+this.user.uid)
					}
					location.reload()
				}).catch(err=>{
					console.log(err)
				})
			},
			getRoomList(){
				this.loading = true
				getRoomList(this.listQuery).then(response=>{
					this.loading = false
					this.listQuery.page++
					this.roomList.push(...response.data.data)
					if(response.data.data.length === 100){
						this.busy = false
					}else{
						this.busy = true
						this.tips = true
					}
					this.$nextTick(()=>{
						customLazyLoad('.lazy')
					})
				}).catch(err=>{
					this.loading = false
				})
			},
			loadMore(){
				let vm = this;
				this.busy = true;
				this.loading = true;
				this.tips = false;
				setTimeout(() => {
					vm.getRoomList();
				}, 1000);
			}
		}
	}
</script>

<style lang="scss">
	@import '@/styles/hall.scss';
</style>
